<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" >
      <el-form-item label="年份" prop="year">
        <el-date-picker clearable v-model="queryParams.year" type="year" value-format="YYYY" placeholder="请选择年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="月份" prop="monthYear" v-if="deptId==101">
        <el-date-picker clearable v-model="monthYear" type="month" value-format="YYYY-MM" placeholder="请选择月份" @change="bindChangeAllDate">
        </el-date-picker>
      </el-form-item>      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['station:freeCar:export']" >导出</el-button>
        <el-button type="warning" plain icon="Download" @click="handleExportDept" v-hasPermi="['system:freeCar:export']">部级导出</el-button>
      </el-form-item>      
    </el-form>
    <el-table :data="tableData" style="width: 100%;"  :header-cell-style="{ 'text-align': 'center '}" show-overflow-tooltip>
      <template v-for="(item,index) in config.goOutContent">
        <el-table-column :label="item.title" v-if="item.children" align="center">
          <template v-for="(element) in item.children">
            <el-table-column :prop="element.prop" :label="element.title" align="center" v-if="!element.children" />
            <el-table-column :label="element.title" v-else align="center">
              <template v-for="(option) in element.children">
                <el-table-column :prop="option.prop" align="center" :label="option.title" />
              </template>
            </el-table-column>
          </template>
        </el-table-column>
        <el-table-column :prop="item.prop" :label="item.title" align="center" :width="item.width" :fixed="item.fixed" v-else>
          <template #default="scope">
            <span v-if="item.render">
              {{item.render(scope.row[item.prop],scope.row)}}</span>
            <span v-else>{{ scope.row[item.prop]=='null'?'-':scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="index" label="操作" width="100" fixed="right" v-if="deptId!=101">
        <template #default="scope">
          <el-button link icon="Edit" size="small" v-hasPermi="['station:freeCar:edit']" type="primary" @click.prevent="editRow(scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改流程分类对话框 -->
    <Mask v-if="dialogVisible" :dialogVisible="dialogVisible" @handleClose="handleClose" :queryParams="queryParams" :rowDetails="rowDetails" :rules="rules"
      :formItemConfig="config.formItemConfig" />

    <el-dialog v-model="dialogVisibleImg">
      <ImagePreview :src="dialogImageUrl" />
    </el-dialog>

  </div>
</template>

<script setup>
import moment from 'moment'
import { deptTreeSelect } from "@/api/system/user";
import { freeCarList, getTotalList } from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'
import config from "./config"
import ImagePreview from "@/components/ImagePreview"
import Mask from "./components/Mask";

const { proxy } = getCurrentInstance()
const queryParams = ref({ year: "", deptId: "" })
const tableData = ref([])
const userStore = useUserStore()
const dialogVisible = ref(false)
const deptOptions = ref([])
const rowDetails = ref({})
const deptId = ref()
const dialogImageUrl = ref("")
const dialogVisibleImg = ref(false)
const monthYear=ref()



function handleQuery() {
  getList();
}
const bindChangeAllDate = (val) => {
  let month=moment(val).format("MM");
  queryParams.value.month = month.charAt(0)==0?month.charAt(1):month
}
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
    config.formItemConfig[0].options = response.data;
  });
};

function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}
const editRow = (data) => {
  rowDetails.value = deepClone(data);
  if(rowDetails.value.month.toString().indexOf("-")==-1){
    let date = data.year + "-" + (Number(data.month < 10) ? '0' + data.month : data.month);
    rowDetails.value.month = date;
  }
   rowDetails.value.deptId = deptId.value
  dialogVisible.value = true;
}




const getList = () => {
  if (deptId.value == 101) {
    getTotalList(queryParams.value).then(res => {
      if (res.code == 200) {
        tableData.value = res.data;
      }
    })
  } else {
    freeCarList(queryParams.value).then(res => {
      if (res.code == 200) {
        tableData.value = res.data;
      }
    })
  }

}
const handleExport=()=>{
  proxy.download('/freeCar/export', {
    ...queryParams.value
  }, `免费车报表_${new Date().getTime()}.xlsx`)
}
const handleExportDept=()=>{
  // 机电站导出
  proxy.download('/freeCar/totalExport', {
    ...queryParams.value
  }, `免费车报表_${new Date().getTime()}.xlsx`)
}
const handleClose = () => {
  rowDetails.value={}
  dialogVisible.value = false;

  getList()
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;     
      if (deptId.value == 101 ) {       
        if(config.goOutContent.length == 4){
          config.goOutContent.shift()
          config.goOutContent.unshift({ title: "收费站名称", prop: "deptName", width: 110 },)
        }
        queryParams.value.month = moment().format('MM');
        monthYear.value = moment().format('YYYY-MM');
      }else{
        queryParams.value.deptId=deptId.value;
      }
      getList()
    }

  })
}
const start = () => {
  let strDate = moment().format('YYYY');
  queryParams.value.year = strDate;
 
}

getDeptId()
getDeptTree()
start()

</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
.margin-right-lg {
  margin-right: 32px;
}
.margin-right {
  margin-right: 8px;
}
.align-center {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
/deep/ .input-height .el-input__wrapper {
  height: 32px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 32px;
}
.title {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  margin: 20px 0;
}
.title::before {
  content: "";
  display: block;
  position: absolute;
  width: 100px;
  height: 6px;
  bottom: 0;
  background: linear-gradient(270deg, rgba(248, 115, 115, 0) 0%, #2252d6 100%);
  border-radius: 3px;
  opacity: 0.7;
}
.inputDeep >>> .el-input__wrapper {
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-shadow: none !important;
  /* border-bottom: 1px solid #eee; */
}
</style>